<!--  -->
<template>
  <div class="bigbox">
    <div class="topbar">叩丁狼电商运营平台</div>

    <div class="container">
      <div class="nav">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#304156"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
          unique-opened
        >
          <el-menu-item index="/">
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu
            :index="menu.id + ''"
            v-for="menu in menus"
            :key="menu.id"
          >
            <template #title>
              <span>{{ menu.title }}</span>
            </template>
            <template v-for="submenu in menu.children">
              <el-menu-item
                v-if="!submenu.hidden"
                :index="`/${menu.name}/${submenu.name}`"
                >{{ submenu.title }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </el-menu>
      </div>

      <div class="content">
        <div class="topnav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">权限</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Homepage",
});
</script>

<script lang="ts" setup>
// 引入computed
import { computed } from "vue";
import { useAdminStore } from "../../store/modules/admin";

const adminStore = useAdminStore();
const menus = computed(() => adminStore.genNewMenus);
</script>
<style lang="less" scoped>
.bigbox {
  height: 100vh;
  .topbar {
    height: 80px;
    background-color: #409eff;
    line-height: 80px;
    padding-left: 20px;
    font-size: 25px;
    color: #eee;
    box-sizing: border-box;
  }
  .container {
    // background-color: #409eff;
    position: relative;
    height: calc(100vh - 80px);
    .nav {
      height: 100%;
      position: absolute;
      left: 0;
      z-index: 1;
      .el-menu {
        overflow: auto;
        width: 240px;
        height: calc(100vh - 80px);
      }
    }
    .content {
      position: absolute;
      height: 100%;
      width: calc(100vw - 240px);
      right: 0;
      overflow: auto;
      .topnav {
        padding: 15px 35px;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
      }
    }
  }
}
</style>
